<template>
    <div class="allDetail">
        <el-card style="max-width: 100%;">
            <template #header>
                <div class="card-header">
                    <span>挂号订单</span>
                </div>
            </template>
            <!-- 选择框 -->
            <div class="sele">
                <el-form label-width="80px" :inline="true">
                    <el-form-item label="就诊人" style="width: 30%;text-align: left;">
                        <el-select placeholder="选择所有患者" v-model="patientId">
                            <el-option label="所有就诊人" value="" @click="getData"></el-option>
                            <el-option :label="allUser?.name " :key="allUser?.id" :value="0 ||allUser?.id"
                                @click="getData"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单状态" style="width: 30%;">
                        <el-select placeholder="选择所有状态" v-model="orderStatus">
                            <el-option label="所有订单状态" value="" @click="getData"></el-option>
                            <el-option v-for="item in allStatus" :label="item?.comment" :key="item?.status"
                                :value="item?.status" @click="getData"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 详情table表格 -->
            <el-table style="width: 100%" :data="saveOrderInfo">
                <el-table-column prop="reserveDate" label="就诊时间" width="120" align="center" />
                <el-table-column prop="hosname" label="医院" width="120" align="center" />
                <el-table-column prop="depname" label="科室" width="120" :show-overflow-tooltip='true' align="center" />
                <el-table-column prop="title" label="医生" width="120" align="center" />
                <el-table-column prop="amount" label="医事服务费" width="120" align="center" />
                <el-table-column prop="patientName" label="就诊人" width="120" align="center" />
                <el-table-column prop="param.orderStatusString" label="订单状态" width="120" :show-overflow-tooltip='true'
                    align="center" />
                <el-table-column prop="address" label="操作">
                    <template #="{ row }">
                        <el-button link type="primary" @click="goDetail(row)">详情</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <div class="demo-pagination-block" style="margin-top: 10px;">
                <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                    background="background" layout=" prev, pager, next, jumper,->,sizes,total" :total="total"
                    @size-change="handleSizeChange" @current-change="handleSizeChange" />
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted,reactive } from "vue"
import { getUserInfo, getUser, getStatus } from '@/api/client/index'
import type { records, allOrderType, statusType, statusList, allUserType, all } from '@/api/client/type'
import { ListFormat } from "typescript";
import { useRouter } from 'vue-router'

let $router = useRouter()

let pageNo = ref<number>(1)
let pageSize = ref<number>(10)
let patientId = ref<string>('')
let orderStatus = ref<string>('')
// 存储订单信息
let saveOrderInfo = ref<records>()
// total
let total = ref<number>(0)
// 存储所有会员
let allUser = ref<any>()
// 存储所有状态
let allStatus = ref<statusList>()


onMounted(async () => {
    await getAllPeople()
    await getInfo()
    await getAllStatus()
})
// 获取userOrderInfo
const getInfo = async () => {
    let result: allOrderType = await getUserInfo(pageNo.value, pageSize.value, patientId.value, orderStatus.value)
    if (result.code == 200) {
        saveOrderInfo.value = result.data.records
        total.value = result.data.total
        console.log(saveOrderInfo.value);
    }
}
// 获取所有会员
const getAllPeople = async () => {
    let result: allUserType = await getUser()
    if (result.code == 200) {
        allUser.value = result.data
    }
    console.log(allUser.value);

}
// 获取所有状态
const getAllStatus = async () => {
    let result: statusType = await getStatus()
    if (result.code == 200) {
        allStatus.value = result.data
    }
    console.log(allStatus.value);


}

// 去往详情页
const goDetail = (row: any) => {
    $router.push({
        path: "/user/order",
        query: {
            id: row.id
        }

    })
}
const handleSizeChange = () => {
    getInfo()
}
const getData = async () => {
    console.log(patientId.value);

    await getInfo()

}
</script>

<style scoped lang="scss">
.allDetail {
    margin: 20px 0 0 20px;

    .card-header {
        font-weight: 900;
        font-size: 20px;
    }

    .sele {
        :deep(.el-form-item__label) {
            display: block;
            padding-left: 10px;
        }
    }

}
</style>